/**
 * Created by nyf on 2017/9/18.
 */
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { hashHistory,Link } from 'react-router';
import screenfull from 'screenfull';
import { LoginOut } from '../../action/ActionUser';
import * as DataName from "../../action/DataNameConfig";
import { Menu, Icon, Layout } from 'antd';
const { Header } = Layout;
const SubMenu = Menu.SubMenu;

class HeaderCommon extends Component {
    constructor(props){
        super(props);
        this.state = {
            user: '',
            visible: false,
            collapsed:false,
            selectedKeys:""
        };
        /* 获取数据类型 */
        this.loginOut=()=>{
            let {dispatch} = this.props;
            dispatch(LoginOut());
            hashHistory.push("/login");
        }
    }

    componentDidMount() {
        /*let path = this.props.location.pathname || "";
        this.setState({
            selectedKeys: path
        });*/
    }
    screenFull =()=> {
        if (screenfull.enabled) {
            screenfull.request();
        }
    };
    menuClick = e => {
        this.setState({
            selectedKeys:e.key
        })
        e.key === 'logout' && this.logout();
    };
    logout = () => {
        localStorage.removeItem('user');
        this.props.router.push('/login')
    };
    render() {
        const { User, BaseData } = this.props;
        let selected = BaseData[DataName.MENU_OPEN_KEY] || "";
        //let responsive = SystemConfig.responsive;
        let menusArray = DataName.HEADER_MENUS || [];
        const menusConts = (
            menusArray.map(item=>{
                return (
                    <Menu.Item key={item.path}>
                        <Link to={item.path}><span>{item.name}</span></Link>
                        {
                            item.children.length > 0?
                                <div className={"sub-list"}>
                                    {
                                        item.children.map(res=>{
                                            return (
                                                <Link to={res.path} className={res.path === selected?"active":""}><span>{res.name}</span></Link>
                                            )
                                        })
                                    }
                                </div>:""
                        }
                    </Menu.Item>
                )
            })
        );
        return (
            <Header className="header_menus_cons" >
                <div className={"header-section"}>
                    <Link to="app/index" className="Base_header_left" style={{ float: 'left' }}>
                        <span>{DataName.SYSTEM_CONFIG_TITLE}</span>
                    </Link>
                    <Menu
                        mode="horizontal"
                        theme="dark"
                        style={{ lineHeight: '64px', float: 'left' }}
                        onClick={this.menuClick}
                        selectedKeys={[selected]}
                    >
                        { menusConts }
                    </Menu>
                    <Menu
                        mode="horizontal"
                        theme="dark"
                        style={{ lineHeight: '64px', float: 'right' }}
                        onClick={this.menuClick}
                        selectedKeys={[selected]}
                    >
                        <Menu.Item key="full" onClick={this.screenFull} >
                            <Icon type="arrows-alt" onClick={this.screenFull} />
                        </Menu.Item>
                        <SubMenu title={<span className="avatar"><img src={User?User.avatar:""} alt="头像" /><i className="on bottom b-white" /></span>}>
                            <Menu.Item key="userName"><div>{User?User.name:""}</div></Menu.Item>
                            <Menu.Item key="loginOut" onClick={this.loginOut}><div onClick={this.loginOut}>退出</div></Menu.Item>
                        </SubMenu>
                    </Menu>
                </div>
                <div className={"header-section2"} />
                <style>{`
                    .ant-menu-submenu-horizontal > .ant-menu {
                        width: 120px;
                        left: -40px;
                    }
                `}</style>
            </Header>
        )
    }
}

export default connect(state=>({
    User: state.User,
    BaseData:state.BaseData,
    SystemConfig:state.SystemConfig
}))(HeaderCommon);